<template>

    <div>
        <el-dialog :model-value="visible" title="企业资料信息" width="500" :close-on-click-modal="false" @close="cls">

            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                status-icon>
                <el-form-item label="企业名称" prop="name" >
                    <el-input v-model="ruleForm.name" :disabled="ruleForm.id!=undefined"/>
                </el-form-item>

                <el-form-item label="企业类目">
                    <el-cascader ref="casref" v-model="temcode" :props="casprops" :options="category"
                        @change="handleChange" style="width: 100%;" />
                </el-form-item>

                <el-form-item label="联系人" prop="user">
                    <el-input v-model="ruleForm.user" />
                </el-form-item>

                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="ruleForm.mobile" />
                </el-form-item>

                <el-form-item label="公司地址" prop="address">
                    <el-input v-model="ruleForm.address" />
                </el-form-item>

            </el-form>



            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="cls">不保存关闭</el-button>
                </div>
            </template>

        </el-dialog>
    </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { queryTree } from '@/api/platform/enterpriseCategory.js'
import { saveEnterprise,updateEnterprise } from '@/api/platform/enterprise.js'
import { ElMessage } from "element-plus";
//定义属性

//选择器属性
const casprops = {
    label: "name",
    value: 'code',
    children: 'children'
}
const temcode = ref()
const casref = ref(null)
//分类树
const category = ref()

//声明属性
const props = defineProps({
    "visible": {
        type: Boolean,
        default: false
    }
})

//声明事件
const emits = defineEmits(["close", "reflush"])

//form表单属性
const ruleFormRef = ref(null)
//表单对象
const ruleForm = ref({
    name: '',
    categoryCode: '',
    categoryName: '',
    user: '',
    mobile: '',
    address: ''
})
//表单验证规则
const rules = reactive({
    name: [
        { required: true, message: '请输入企业名称', trigger: 'blur' },
    ],
    user: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入公司地址', trigger: 'blur' },
    ]
})
//方法区

let handleChange = (v) => {
    // console.log(v)
    //最后一个的下标  分类编码
    let index = v.length - 1
    ruleForm.value.categoryCode = v[index]
    //分类名称
    let tmp = casref.value.getCheckedNodes();
    ruleForm.value.categoryName = tmp[0].label
}

//关闭
let cls = () => {
    //抛出事件
    emits("close")
}

//查询分类树
let tree = async () => {
    let res = await queryTree();
    // console.log(res);
    if (res.code == 200) {
        category.value = res.data
    }
    // console.log(category.value)
}

//组件显示时 初始化
let init = (data) => {
    if (data) {
        //修改
        temcode.value = data.categoryCode
        ruleForm.value = data
    } else {
        //添加
        ruleForm.value = {
            name: '',
            categoryCode: '',
            categoryName: '',
            user: '',
            mobile: '',
            address: ''
        }
        temcode.value =''
    }
}

//暴露init方法 让父组件调用
defineExpose({init})

//保存
let save = async () => {
    // console.log(ruleForm.value);return;
    if (temcode.value.length == 0) {
        ElMessage({
            message: "请选择类目！",
            type: "warning"
        });
        return;
    }

    //调用表单校验 异步的
    let valid = await ruleFormRef.value.validate(valid => { })
    if (!valid) {
        return;
    }

    //验证通过 发送请求 提交表单
    let res=''

    //根据是否存在企业id 判断是修改还是添加
    if (ruleForm.value.id) {
        //id存在， 修改
        res=await updateEnterprise(ruleForm.value)
    }else{
        //添加
        res = await saveEnterprise(ruleForm.value)
    }
    //接口返回数据
    if (res.code == 200) {
        ElMessage({
            message: "保存成功",
            type: "success"
        });
        //关闭对话框
        cls();
        //通知父组件刷新数据
        emits("reflush")
    }
}

onMounted(() => {
    tree()
})
</script>

<style scope>

</style>